<template>
	<view class="container" style = "background-color: #f3f3f3;">
		<view class="title"><i class="icon icon-fensi"></i>{{ $t('mine.my_comment')}}({{list.length}})</view>
		
		<scroll-view style="height:90vh" scroll-y>
			
				<template v-for="(item,index) in list">
					<!--主帖显示开始-->
					<view style="height: 15rpx;"></view>
					<view class="body">
					  <view class="article-item">
					  	<view class="article-header u-flex u-row-between">
					  		<view class="article-header_info u-flex" :data-uid="item.AddAcc">
					  			<view class="article-header_avatar">
					  				<u-image v-if="item.TopicAvatar" width="60rpx" height="60rpx" border-radius="60rpx"
					  					:src="item.TopicAvatar"></u-image>
					  				<u-image v-else width="60rpx" height="60rpx" border-radius="60rpx"
					  					src="@/static/images/avatar.jpg"></u-image>
					  			</view>
					  			<view class="article-header_name">
					  				<view class="article-header_name--text">{{item.TopicNickName}}</view>
					  			</view>
					  		</view>
					  		<view class="article-header_time">
					  			{{item.TopicTime}}
					  		</view>
					  	</view>
					  	<view class="article-content">
					  		<rich-text class="rich-val" :nodes="item.TopicContent" @longtap="copy(item.TopicContent)"></rich-text>
					  		<text class="article-content_friends" v-if="item.FriendAccName">{{item.FriendAccName}}</text>
					  	</view>
					  	<view class="article-video" v-if="item.VodSrc != ''" @click.stop="actVideoPlay(item.VodSrc)">
					  		<image class="article-video_img" mode="aspectFit" :src="item.VodImg.indexOf('https') > -1 ? item.VodImg: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/' + item.VodImg"></image>
					  		<view class="article-video_play" v-if="!isPlay">
					  			<image class="article-video_play--icon" src="/static/images/home/play.png" mode="scaleToFill" />
					  		</view>
					  		<video :id="'video'+index" class="article-video_item" :src="item.VodSrc" :autoplay="autoplay"
					  			page-gesture="true" @fullscreenchange="fullscreenchange" @ended="colseVideoPlay" v-if="isPlay" />
					  	</view>
					  	<view class="article-images">
					  		<template v-for="(img, index) in item.TopicImgPackJson">
					  			<reply-images-item :item="img" :index="index"
					  				:imgjson="item.TopicImgPackJson">
					  			</reply-images-item>
					  		</template>
					  	</view>
						<view style="height: 2rpx;background-color: #f3f3f3;"></view>
						<view class="detail-comment_header u-flex u-row-between">
							<view class="comment-header_title u-flex">
							<image class="comment-header_title--icon"
								src="/static/images/home/icon-shequ.png" mode="scaleToFill" />
							<view class="comment-header_title--label">{{ $t('mine.my_comment')}}：
							</view>
						</view>
					</view>
					  </view>
					  <!--主帖显示结束-->
					<!--评论显示开始-->
					<view class="detail-comment_item u-flex u-col-top u-border-bottom">
						<view class="comment-item_avatar" @click="go2User(item.AddAcc)">
							<u-image v-if="item.UserAvatar" width="60rpx" height="60rpx" border-radius="60rpx"
								:src="item.UserAvatar"></u-image>
							<u-image v-else width="60rpx" height="60rpx" border-radius="60rpx"
								src="/static/images/avatar.jpg"></u-image>
						</view>
						<view class="comment-item_content u-flex-1">
							<view class="item-content_header u-flex u-row-between u-col-top">
								<view class="item-content_header--left u-flex">
									<view class="item-content_header--name" style="white-space: nowrap ;" @click="go2User(item.AddAcc)">{{item.UserName}}:</view>															
								</view>																							
							</view>
							<rich-text class="item-content_text " :nodes="item.Content"></rich-text>
							<view class="article-video" v-if="item.VodSrc != ''"
								@click.stop="actVideoPlay(item.VodSrc)">
								<image class="article-video_img" mode="aspectFit" :src="item.VodImg">
								</image>
								<view class="article-video_play" v-if="!isPlay">
									<image class="article-video_play--icon" src="/static/images/home/play.png"
										mode="scaleToFill" />
								</view>
							</view>
								<view class="article-images1" v-if="item.ImgPackJson != ''">
									<template v-for="(img, index) in item.ImgPackJson">
										<u-image class="u-m-r-10" width="200" :src="img.Src" mode="widthFix" @click="actPreviewImage(item.ImgPackJson,index)"></u-image>
									</template>
<!-- 									<template v-for="(img, index) in item.ImgPackJson">
										<reply-images-item :item="img" :index="index"
											:imgjson="item.ImgPackJson">
										</reply-images-item>
									</template> -->
									
								</view>
							<text class="article-content_friends" v-if="item.FriendAccName">{{item.FriendAccName}}</text>
							<view class="item-content_header--right u-flex">
								<u-icon name="trash-fill" color="#2979ff" size="28"
									@click="actDeleteReplyShow(item.Rid,item.Topic)"></u-icon>
								<view class="item-content_header--time u-m-l-20" style="white-space:nowrap">{{item.AddTimeText}}</view>							
							</view>
						</view>
					</view>
					<!--评论显示结束-->
					</view>
				</template>
		
				<u-modal v-model="deleteReplyShow" :show-cancel-button="true" :show-title="false" :cancelText="$t('mine.btn_cancel')"
					:confirmText="$t('mine.btn_confirm')" :content="$t('mine.bbs_confirm_del_reply')" @confirm="actDeleteReply()"></u-modal>
		</scroll-view>
	</view>
</template>

<script>
	import uniShare from '@/components/uni-share/js_sdk/uni-share.js';
	import TUIEmoji from "@/components/tui-chat/message-elements/emoji/index";
	import {
		emojiName,
		emojiUrl,
		emojiMap
	} from "@/components/base/emojiMap";
	import imagesItem from '@/components/images-item/index.vue';
	import replyImagesItem from '@/components/reply-images-item/index.vue';
	import articleItem from "@/components/article-item/index.vue";
	import pageMixin from '@/utils/pageMixin';
export default {
	data() {
		return {
			list: [],
			uid: 0,
			index: 0,
			name: '',
			showModal: false,
			deleteReplyShow: false,
		}
	},
	onLoad() {
		this.getList()
		uni.setNavigationBarTitle({
			title: this.$t('mine.comment_list')
		});
	},
	components: {
		replyImagesItem,
		articleItem,
		imagesItem,
	},
	computed: {
		i18n() {
			return this.$t('mine')
		}
	},
	methods: {
		getList() {
			const user = uni.getStorageSync('userInfo')
			const uid = user.uid
			console.log(uid)
			this.$http.get('/bbs/topic/getTopic/data',{userid: uid }).then(res=> {
				this.list = res
				console.log(this.list)
			})
		},
		actDeleteReplyShow(rid,tid) {
				this.deleteReplyShow = true;
				this.deleteReplyId = rid;
				this.tid = tid
			},
			actDeleteReply() {
				let that = this;
				if (that.deleteReplyId > 0) {
					that.$http.post('/bbs/topic/reply/delete', {
						tid: that.tid,
						rid: that.deleteReplyId
					}).then(res => {
						uni.showToast({
							title: this.$t('mine.del_success')
						});
						that.deleteReplyShow = false;
						that.getList();
					})
				}
			},
			go2User(uid) {
				if (uid > 1) {
					uni.navigateTo({
						url: '/pages/user/index?uid=' + uid
					});
				}
			},
			actPreviewImage(imgPackJson, index) {
				let urls = [];
				imgPackJson.forEach(function(item) {
					urls = urls.concat(item.Src);
				});
				// 预览图片
				uni.previewImage({
					urls: urls,
					current: index,
					indicator: 'default',
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							uni.showLoading({  
									title:"保存中..."  
							})  
							setTimeout(function() {   
									uni.hideLoading()  
							}, 6000);  
							uni.downloadFile({  
									url: urls[data.index],//网络路径，下载下来  
									success: (data) => {  
											if (data.statusCode === 200) {  
													uni.saveImageToPhotosAlbum({  
															filePath: data.tempFilePath,//下载后的临时路径  
															success:  data => {//下载完成后在相册里压根找不到  
																	uni.hideLoading()  
																	uni.showToast({  
																			title:"保存成功！"   
																	})  
															}  
													})  
											}  
									}  
							});  	
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
      actVideoPlay(src) {
				let videoSrc = ''
				if(src.indexOf('https') > -1) {
					videoSrc = src
				}else {
					videoSrc = 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/' + src
				}
				uni.navigateTo({
					url: `/pages/TUIKit/TUIPages/TUIChat/components/message-elements/video-play?videoMessage=${videoSrc}`
				})
			}
	}
}
</script>

<style lang="scss" scoped>
	.article-images1 {
		clear: both;
		overflow: hidden;
		padding-bottom: 10rpx;
		display: flex;
		flex-wrap: wrap;
		&_item {
			margin: 10rpx;
			float: left;
		}
	}
.container {
	padding: 0rpx;
	background-color: #f3f3f3;
}
.body {
	background-color: #ffffff;
	overflow: hidden;
}
	.detail-comment_header {
		height: 76rpx;
		background-color: #fff;
	}
	.comment-header_action {
		font-size: 24rpx;
		color: #0089FF;
	}

	.comment-header_title--icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 6rpx;
	}

	.comment-header_title--label {
		font-size: 30rpx;
		color: #131313;
	}
.title {
	background-color: #ffffff;
	font-size: 36rpx;
	font-weight:700;
	padding: 20rpx;
	// border-bottom: 1px solid #DCDBDC;
	.icon-fensi {
		color: #2e74fc;
		margin-right: 10rpx;
		font-size: 36rpx; 
	}
}
	.detail-comment {

		&_item {
			padding: 0rpx 32rpx 32rpx;

			.comment-item_avatar {
				margin-right: 12rpx;
			}

			.item-content_header {
				margin-bottom: 20rpx;
			}

			.item-content_header--name {
				font-size: 26rpx;
				color: #131313;
			}

			.item-content_header--time {
				font-size: 24rpx;
				color: #B0B3B8;
			}

			.item-content_header--action {
				color: #0089FF;

				.icon {
					font-size: 26rpx;
				}
			}

			.item-content_text {
				color: #5D5D5F;
				white-space: pre-line;
				white-space: normal;
				word-break: break-all;
				word-wrap: break-word;
				word-break: break-word;
			}
		}
	}
	.nodata {
		width: 100%;
		text-align: center;
		margin:0 auto;
		}
	.article-item {
		border-radius: 10rpx;
		padding: 30rpx 30rpx 0;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		.article-header {
			height: 85rpx;
			margin-bottom: 24rpx;
		}

		.article-header_avatar {
			margin-right: 26rpx;
		}

		.article-header_name--text {
			font-size: 26rpx;
			color: #494949;
			font-weight: bold;
		}

		.article-header_name--label {
			color: #9A9A9A;
		}

		.article-header_time {
			font-size: 24rpx;
			color: #999999;
		}

		.article-content {
			font-size: 30rpx;
			margin-bottom: 24rpx;
			margin-left: 30rpx;
			white-space: pre-line;
			white-space: normal;
			word-break: break-all;
			word-wrap: break-word;
			word-break: break-word;

			&_friends {
				display: inline-block;
				margin-left: 6rpx;
				color: #61b1f3;
			}
		}

		.article-video {
			position: relative;
			margin-bottom: 30rpx;

			&_item {
				z-index: 9;
				position: absolute;
				top: 0;
				left: 10%;
				width: 80%;
				height: 100%;
			}

			&_img {
				max-width: 690rpx;
				max-height: 300rpx;
				width: auto;
			}

			&_play {
				width: 62rpx;
				height: 62rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 5px;
				background: #505050;

				&--icon {
					width: 100%;
					height: 100%;
				}
			}
		}

		.article-images {
			clear: both;
			overflow: hidden;
			padding-bottom: 10rpx;
			display: flex;
			flex-wrap: wrap;
			&_item {
				margin: 10rpx;
				float: left;
			}
		}



		.article-handle {
			&_item {
				height: 76rpx;
				width: 182rpx;
				color: #4D4D4C;
        .icon-shoucangxuanzhong {
					color: $u-type-primary;
				}
				&.active {
					color: $u-type-primary;

					.article-handle_item--icon {
						animation: active .5s ease-in;
					}
				}

				&--icon {
					font-size: 38rpx;
					margin-right: 15rpx;
				}
			}
		}

		.comment-box {
			padding: 24rpx 24rpx;
			background: #F3F3F3;

			.inputStyle {
				padding: 20rpx;
				background: #FFFFFF;
				border: 1rpx solid #EAEAEA;
				border-radius: 8rpx;

				.text-input {
					height: 200rpx;
					outline: none;
				}
			}
		}

		@keyframes active {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.5);
			}

			100% {
				transform: scale(1);
			}
		}
	}

	.reply_footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		width: 100%;

		.reply_footer_left {
			flex: 5;

			.icon-biaoqing {
				font-size: 50rpx;
				margin-left: 20rpx;
			}
		}
	}

	.comBtnStyle {
		margin-top: 10rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #2979ff;
		border-color: #2979ff;
		border-radius: 24rpx;
		float: left;
	}

	.emoji_box {
		position: fixed;
		bottom: 120rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		flex-wrap: wrap;
		height: 350rpx;
		overflow-y: scroll;
		width: 95%;

		// width: 100%;
		.emoji {
			margin-left: 12rpx;
		}
	}

	.btnStyle {
		white-space: nowrap;
		line-height: 60rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		background: #2979ff;
		border-color: #2979ff;
		float: right;
	}

	.tui-common-words-container {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		top: 0;
		/*  #ifdef  H5  */
		top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top));
		/*  #endif  */
		background: rgba(0, 0, 0, 0.5);
	}

	.tui-common-words-box {
		position: absolute;
		width: 100%;
		height: 60%;
		bottom: 0;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 68rpx;
		z-index: 200;
	}

	.tui-common-words-title {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-top: 48rpx;
		font-family: PingFangSC-Medium;
		font-size: 36rpx;
		color: #000000;
		letter-spacing: 0;
		line-height: 50rpx;
	}

	.tui-search-bar {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin: 32rpx 40rpx;
		width: 670rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		border-radius: 40rpx;
		background-color: #F8F8F8;
	}

	.tui-searchcion {
		display: inline-block;
		margin-left: 24rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.tui-search-bar-input {
		margin-left: 16rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		width: 100%;
		display: inline-block;
	}

	.tui-common-words-list {
		position: absolute;
		top: 100rpx;
		bottom: 68rpx;
		width: 750rpx;
	}

	.tui-common-words-item {
		width: 750rpx;
		height: 112rpx;
		border-bottom: 2rpx solid #EEF0F3;
		background-color: #FFFFFF;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #333333;
		letter-spacing: 0;
		line-height: 44rpx;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
	}

	.TUI-icon {
		margin-top: 14rpx;
		margin-left: 20rpx;
		width: 56rpx;
		height: 60rpx;
		line-height: 60rpx;
		float: left;
	}

	.TUI-Emoji-area {
		width: 100vw;
		height: 450rpx;

	}

	.publish {
		padding-bottom: 100rpx;
		min-height: 100vh;
		background-color: #fff;

		&-input {
			padding: 30rpx;
			width: 100%;
		}
	}

	.publish-images {
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		clear: both;
		overflow: hidden;

		&_item {
			position: relative;
			margin: 10rpx;
			float: left;

			.u-icon {
				z-index: 999;
				position: absolute;
				top: 6rpx;
				right: 6rpx;
				background-color: #FFFFFF;
				border-radius: 42px;
			}
		}
	}

	.publish-friends {
		padding: 0 30rpx;

		&_item {
			font-size: 28rpx;
			color: #0073DB;
		}
	}

	.uploader_video {
		position: relative;
		width: 118rpx;
		height: 118rpx;
		border-radius: 10rpx;
		overflow: hidden;

		.close-icon {
			z-index: 99999;
			position: absolute;
			top: 4rpx;
			right: 4rpx;

			.u-icon {
				background: #FFFFFF ;
				border-radius: 100%;
			}
		}

		&_play--icon {
			width: 36rpx;
			height: 36rpx;
			z-index: 999;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 5px;
			background: #505050;
		}
	}

	.publish-handle {
		z-index: 999;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #f1f1f1;

		&_content {
			padding: 20rpx 30rpx;
		}

		&_left {
			font-size: 48rpx;
			color: #777777;

			&--item {
				padding: 0 16rpx;
			}

			.icon {
				font-size: 48rpx;
				// margin-right: 20rpx;
			}
		}

		&_right {
			color: #999999;
		}
	}

	.video {
		z-index: 9;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.rich-val {
	    word-break: break-all;
		word-break: break-word;
	    white-space: pre-line;
	
	}
</style>